/*!
 * Page: pages/form/index/index
 * License: MIT
 * Created: 2019-08-29 11:44
 */

@import '../../var';
page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: $bgcolor-gray;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.border-b {
    border-bottom: 1rpx solid $border-color;
}

.mt20 {
    margin-top: 20rpx;
}

.card {
    margin-top: 20rpx;
    padding: 0 30rpx 32rpx;
    background-color: #fff;
    &-title {
        padding: 24rpx 0;
        font-size: 30rpx;
        font-weight: bold;
        color: $title-color;
    }
    .row {
        display: flex;
        font-size: 30rpx;
        line-height: 35rpx;
        &:not(:first-child) {
            margin-top: 24rpx;
        }
        &.express {
            padding: 4rpx 0 28rpx;
            &:not(:last-child) {
                border-bottom: 1rpx solid $border-color;
            }
            &:last-child {
                padding-bottom: 0;
            }
        }
        .title {
            color: $text-color;
        }
        .content {
            flex: 1;
            padding-left: 24rpx;
            color: $title-color;
            word-break: break-all;
        }
        .btn {
            margin: 0;
            padding: 0 20rpx;
            height: 42rpx;
            font-size: 24rpx;
            color: $primary-color;
            border: 2rpx solid $primary-color;
            border-radius: 32rpx;
            background-color: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.fillExpress {
    margin: 40rpx auto 10rpx;
    padding: 0;
    width: 360rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #fc7a2d 0%, #fc2a40 100%);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
}

.reason {
    margin-top: 20rpx;
    padding: 30rpx;
    background: #fff;
    &.append {
        margin-top: 0;
        border-top: 1rpx solid $border-color;
    }
    .title {
        padding-bottom: 24rpx;
        font-size: 30rpx;
        font-weight: bold;
    }
    .content {
        margin-bottom: 30rpx;
        font-size: 32rpx;
        color: $info-color;
    }
    .images {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .img {
            width: 156rpx;
            height: 156rpx;
            background: #f5f5f5;
            border-radius: 6rpx;
            position: relative;
            &:not(:nth-child(-n + 4)) {
                margin-top: 14rpx;
            }
            &:not(:nth-child(4n-3)) {
                margin-left: 14rpx;
            }
        }
    }
    .refund {
        margin-top: 28rpx;
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: $title-color;
        text {
            font-weight: bold;
            &:first-child {
                margin-right: 24rpx;
                font-weight: normal;
            }
        }
    }
}

.history-btn {
    padding: 28rpx;
    margin-top: 20rpx;
    font-size: 30rpx;
    color: $title-color;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .arrow {
        width: 12rpx;
        height: 39rpx;
        transform: rotate(90deg);
        &.active {
            transform: rotate(270deg);
        }
    }
}

.order-list {
    margin-top: 20rpx;
    padding: 24rpx 30rpx;
    background: #fff;
    .list-title {
        padding-bottom: 24rpx;
        font-size: 30rpx;
        font-weight: bold;
    }
    .item {
        margin-bottom: 16rpx;
        flex-direction: column;
        width: 100%;
        color: $text-color;
        background-color: $bgcolor-light;
        border-radius: 10rpx;
        .productInfo {
            display: flex;
            width: 100%;
            height: 120rpx;
            margin-top: 20rpx;
            background-color: $bgcolor-gray;
            .productImg {
                width: 120rpx;
                height: 120rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .productPrice {
                display: flex;
                flex: 1;
                align-items: center;
                justify-content: space-between;
                height: 100%;
                padding: 18rpx 20rpx 18rpx 20rpx;
                .title {
                    color: $title-color;
                    font-size: 24rpx;
                }
                .productCount {
                    color: $info-color;
                    font-size: 22rpx;
                    text-align: right;
                    &-price {
                        color: $title-color;
                        font-weight: 600;
                    }
                }
                .options {
                    color: $info-color;
                    font-size: 20rpx;
                }
            }
        }
        .productFooter {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: space-between;
            padding: 24rpx 0;
            .price {
                color: $title-color;
                font-size: 24rpx;
                text {
                    color: $info-color;
                }
            }
        }
    }
    .order-row {
        margin-top: 8rpx;
        font-size: 26rpx;
        color: $info-color;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.footer {
    flex: 1;
    margin-top: 24rpx;
    padding: 40rpx 0 20rpx;
    background-color: #fff;
    .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .btn {
            margin: 0;
            padding: 0 66rpx;
            height: 88rpx;
            border-radius: 40rpx;
            border: 2rpx solid #ccc;
            font-size: 32rpx;
            color: $title-color;
            background-color: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            &:not(:first-child) {
                margin-left: 30rpx;
            }
            &.w-330 {
                width: 330rpx;
                padding: 0;
            }
            &.w-full {
                width: 690rpx;
                margin-left: 0;
            }
            &.mt-32 {
                margin-top: 32rpx;
            }
            &.b-primary {
                border-color: $primary-color;
            }
            &.font-primary {
                color: $primary-color;
            }
            &.bg-primary {
                background-color: $primary-color;
                color: #fff;
            }
        }
    }
    .tips {
        margin-top: 32rpx;
        font-size: 20rpx;
        color: $info-color;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .opts {
        display: flex;
        align-items: center;
        margin-top: 74rpx;
        &.pt-46 {
            padding-top: 46rpx;
        }
        &.pt-206 {
            padding-top: 206rpx;
        }
        .opt {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            color: $info-color;
            &:not(:first-child) {
                border-left: 1rpx solid $border-color;
            }
            image {
                width: 46rpx;
                height: 46rpx;
                margin-right: 12rpx;
            }
        }
    }
}